<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <!-- 搜索 -->
      <el-form-item label="班级名称">
        <el-input v-model="searchs" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item style="position: absolute; right: 100px;">
        <el-button type="primary" style="pa" @click="addp4">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 学员信息列表 -->

    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;" @cell-click="celltable">

      <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="身份证号"  prop="code">  </el-table-column>
        <el-table-column label="手机号" prop="phone"> </el-table-column>
        <el-table-column label="前端阶段" prop="stage"> </el-table-column>
        <el-table-column label="家庭地址" prop="address"> </el-table-column>
        <el-table-column label="出生日期" prop="born"> </el-table-column>
        <el-table-column label="学历" prop="edu"> </el-table-column>
        <el-table-column label="专业" prop="major"> </el-table-column>
        <el-table-column label="微信号" prop="wx"> </el-table-column>
        <el-table-column label="QQ号" prop="qq"> </el-table-column>
        <el-table-column label="目前状态" prop="cur"> </el-table-column>
        <el-table-column label="目标就业城市" prop="city"> </el-table-column>
        <el-table-column label="紧急联系人" prop="emer"> </el-table-column>
        <el-table-column label="紧急联系人电话" prop="emerphone"> </el-table-column>
        <el-table-column label="顾问老师" prop="teacher"> </el-table-column>

      <el-table-column label="操作" width="180" fixed="right">
        <template>
          <el-button size="mini" @click="editp4">编辑</el-button>
          <el-button size="mini" type="danger" @click="deletep4">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="block" style="padding-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" layout="total, prev, pager, next, jumper" :total="tableData.length">
        >
      </el-pagination>
    </div>

    <!-- 功能组件 -->
    <Addp4 :type="buttontype.addp4" :fun="showbtn" tname="addp4" :tablerow="tablerow"></Addp4>
    <Editp4 :type="buttontype.editp4" :fun="showbtn" tname="editp4" :tablerow="tablerow"></Editp4>
    <Deletep4 :type="buttontype.deletep4" :fun="showbtn" tname="deletep4" :tablerow="tablerow"></Deletep4>

  </div>
</template>

<script>
import Addp4 from './Addp4.vue'
import Editp4 from './Editp4.vue'
import Deletep4 from './Deletep4.vue'
export default {
  data () {
    return {
      searchs: '',
      currentPage: 1, // 初始页
      pagesize: 10, //    每页的数据
      tablerow: '', // 当前选中的用户
      buttontype: {
        // 功能模态框
        addp4: false,
        editp4: false,
        deletep4: false
      },
      form: {
        name: '', // 姓名
        sex: '', // 性别
        code: '', // 身份证号
        phone: '', // 手机号
        stage: '', // 前端阶段
        address: '', // 家庭地址
        born: '', // 出生日期
        edu: '', // 学历
        major: '', // 专业
        wx: '', // 微信
        qq: '', // qq
        cur: '', // 目前状态
        city: '', // 目标就业城市
        emer: '', // 紧急联系人
        emerphone: '', // 紧急联系人电话
        teacher: ''// 顾问老师
      },
      tableData: [{
        name: '王雷', // 姓名
        sex: '男', // 性别
        code: '12345678911121315', // 身份证号
        phone: '32165478911', // 手机号
        stage: 'js', // 前端阶段
        address: '河北省张家口市', // 家庭地址
        born: '2000.03.15', // 出生日期
        edu: '大专', // 学历
        major: '计算机', // 专业
        wx: 'wwwxxxHH', // 微信
        qq: '15236425', // qq
        cur: '就业', // 目前状态
        city: '杭州', // 目标就业城市
        emer: '李兰', // 紧急联系人
        emerphone: '12345684585', // 紧急联系人电话
        teacher: '李敏'// 顾问老师
      },
      {
        name: '王立马', // 姓名
        sex: '女', // 性别
        code: '12345678911121315', // 身份证号
        phone: '32165478911', // 手机号
        stage: 'js', // 前端阶段
        address: '河北省张家口市', // 家庭地址
        born: '2000.03.15', // 出生日期
        edu: '本科', // 学历
        major: '教育', // 专业
        wx: 'wwwxxxHH', // 微信
        qq: '15236425', // qq
        cur: '学习', // 目前状态
        city: '北京', // 目标就业城市
        emer: '王家', // 紧急联系人
        emerphone: '12345684585', // 紧急联系人电话
        teacher: '张开'// 顾问老师
      }
      ]
    }
  },
  components: {
    Addp4,
    Editp4,
    Deletep4
  },
  methods: {
    search () {
      console.log(this.searchs)
      this.form.search = ''
    },
    // 当前选中的用户
    celltable (row) {
      this.tablerow = row
    },
    // 关闭模态框的状态
    showbtn (type) {
      this.buttontype[type] = false
    },
    // 开启新增学员模态框的状态
    addp4 () {
      this.buttontype.addp4 = true
    },
    // 开启修改学员信息模态框的状态
    editp4 () {
      this.buttontype.editp4 = true
    },
    // 开启删除学员信息模态框的状态
    deletep4 () {
      this.buttontype.deletep4 = true
      // console.log();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    }
  }
}
</script>

<style scoped="scoped">
</style>
